<template>
  <div>
    <el-dialog title="修改轮播图" :visible="dialogTableVisible" :before-close="closeDialog" :modal="true">
      <el-form ref="form" :model="bannerData" label-width="80px">
        <el-form-item label="轮播图片">
          <el-upload
            action="http://lzyzone.top/uploadimage/image/upload/lzy"
            :on-success="uploadSucess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-image :src="bannerData.imageUrl" :preview-src-list="[bannerData.imageUrl]" style="width: 200px;height:100px;" />
        </el-form-item>
      </el-form>

      <el-form ref="form" :model="bannerData" label-width="80px">
        <el-form-item label="排序">
          <el-input-number v-model="bannerData.sort" :min="1" :max="100"></el-input-number>
        </el-form-item>
      </el-form>

      <el-form ref="form" :model="bannerData" label-width="80px">
        <el-form-item label="跳转路由">
          <el-input v-model="bannerData.toRouterUrl"></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="bannerData" label-width="80px">
        <el-form-item label="跳转路径">
          <el-input v-model="bannerData.toUrl"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>

export default {
  name: "banneredit",
  props: {
    bannerData: Object
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      dialogTableVisible: false,
    }
  },



  methods: {
    transitionVisible() {
      this.dialogTableVisible = !this.dialogTableVisible;
    },
    closeDialog() {
      this.dialogTableVisible = false;
    },

    /**/
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.bannerData.imageUrl = null;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*上传成功的钩子*/
    uploadSucess(response, file, fileList) {
      this.bannerData.imageUrl = response.data.filePath;
    },
    /* 提交 */
    submitOn() {
      console.log(this.bannerData)
      this.$axios.post('/sys/banner/update', this.bannerData)
        .then((res)=> {
          // 提交成功
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.dialogTableVisible = false;
          this.$parent.getList();
        })
        .catch((err)=> {

        })
    }
  },
  watch: {
    dialogTableVisible: {
      handler(val) {
      }
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
}
</style>
